<script setup lang="tsx">
import type { CustomDialogInstance } from '@/types'
import { queryReportRecordsByPage } from '@/api/modules/dataReport'
import { REPORT_EVENT_TYPE, REPORT_EVENT_TYPE_TEXT } from '@/enum'
import { PAGING } from '@/constant'

const props = defineProps<{
  dataId: number
  title?: string
}>()
const dialogRef = ref<CustomDialogInstance>()
const loading = ref(false)
const columns = [
  { key: uuid(), label: '操作类型', prop: 'eventType', render({ row }: any) {
    const text = ({
      [REPORT_EVENT_TYPE.STAGE]: REPORT_EVENT_TYPE_TEXT.STAGE,
      [REPORT_EVENT_TYPE.REPORT]: REPORT_EVENT_TYPE_TEXT.REPORT,
      [REPORT_EVENT_TYPE.RESOLVE]: REPORT_EVENT_TYPE_TEXT.RESOLVE,
      [REPORT_EVENT_TYPE.REJECT]: REPORT_EVENT_TYPE_TEXT.REJECT,
    })[row.eventType as REPORT_EVENT_TYPE]
    return (
      <span>{text}</span>
    )
  } },
  { key: uuid(), label: '创建时间', prop: 'creationTime' },
  { key: uuid(), label: '操作人', prop: 'creationName' },
  { key: uuid(), label: '备注', prop: 'remark' },
]
const lists = shallowRef([])
const pagination = reactive({
  pageNumber: 1,
  pageSize: PAGING.PAGE_SIZES[0],
  total: 0,
})
const modalTitle = computed(() => {
  return props.title ?? '报表操作记录'
})

async function getTableData() {
  loading.value = true
  try {
    if (props.dataId) {
      const { data } = await queryReportRecordsByPage(
        props.dataId,
        pagination.pageNumber,
        pagination.pageSize,
      )
      lists.value = data.records ?? []
      pagination.total = data.total ?? 0
    }
  }
  finally {
    loading.value = false
  }
}

async function open() {
  await getTableData()
  await nextTick()
  dialogRef.value?.open()
}
function close() {
  dialogRef.value?.close()
}

defineExpose({
  open,
  close,
})
</script>

<template>
  <CustomDialog
    ref="dialogRef"
    :title="modalTitle"
    :show-confirm-button="false"
    :show-cancel-button="false"
  >
    <div class="h-100 flex flex-col">
      <TableLists
        :loading="loading"
        :columns="columns"
        :lists="lists"
        :show-toolbox="false"
        :no-border-bottom="true"
      />
      <ListsPagination
        v-model:page-num="pagination.pageNumber"
        v-model:page-size="pagination.pageSize"
        :total="pagination.total"
        @current-change="getTableData"
        @size-change="getTableData"
      />
    </div>
  </CustomDialog>
</template>
